/* eslint-disable @iceworks/best-practices/recommend-polyfill */
import { Drawer, Tab } from '@alifd/next';
import { t } from '@lingui/macro';
import React from 'react';
import { useParams } from 'react-router';
import BusOrderForm from '../order/BusOrder/components/BusOrderForm';
import OrderLogsBus from '../order/BusOrder/components/OrderLogs';
import CcOrderForm from '../order/CcOrder/components/CcOrderForm';
import OrderLogsCc from '../order/CcOrder/components/OrderLogs';
import OrderLogsSc from '../order/ScOrder/components/OrderLogs';
import ScOrderForm from '../order/ScOrder/components/ScOrderForm';
import RsOrderForm from '../order/RsOrder/components/RsOrderForm';
import OrderLogsRs from '../order/RsOrder/components/OrderLogs';
import ScTask from '../task/ScTask/components/TaskInfoDrawer/TaskInfo';
import ScTaskLogs from '../task/ScTask/components/TaskInfoDrawer/TaskLogs';

export default function OrderView() {
  const { id } = useParams();
  /**
   * 订单类型： 1 - 包车； 2 - 专线； 3 - 巴士 4 - 拼车 5 - 专线任务
   */
  let orderType = 1;
  if (id?.startsWith('SCO')) orderType = 2;
  if (id?.startsWith('BUS')) orderType = 3;
  if (id?.startsWith('RS')) orderType = 4;
  if (id?.startsWith('ZXR')) orderType = 5;

  const handleClose = () => {
    window.parent.postMessage('closed', '*');
  };

  return (
    <div style={{}}>
      <Drawer
        closeMode={[]}
        visible
        animation={false}
        width="100%"
        style={{ maxWidth: '100%', border: 0 }}
        onClose={handleClose}
      >
        {orderType === 1 &&
          <Tab>
            <Tab.Item key="1" title={t`订单信息`}>
              <CcOrderForm orderId={id} modal={['view']} onCancel={() => handleClose()} />
            </Tab.Item>
            <Tab.Item key="2" title={t`订单历史变更记录`}>
              <OrderLogsCc orderId={id} />
            </Tab.Item>
          </Tab>}
        {orderType === 2 &&
          <Tab>
            <Tab.Item key="1" title={t`订单信息`}>
              <ScOrderForm orderId={id} modal={['view']} onCancel={() => handleClose()} />
            </Tab.Item>
            <Tab.Item key="2" title={t`订单历史变更记录`}>
              <OrderLogsSc orderId={id} />
            </Tab.Item>
          </Tab>}
        {orderType === 3 &&
          <Tab>
            <Tab.Item key="1" title={t`订单信息`}>
              <BusOrderForm orderId={id} modal={['view']} onCancel={() => handleClose()} />
            </Tab.Item>
            <Tab.Item key="2" title={t`订单历史变更记录`}>
              <OrderLogsBus orderId={id} />
            </Tab.Item>
          </Tab>}
        {orderType === 4 &&
          <Tab>
            <Tab.Item key="1" title={t`订单信息`}>
              <RsOrderForm orderId={id} modal={['view']} onCancel={() => handleClose()} />
            </Tab.Item>
            <Tab.Item key="2" title={t`订单历史变更记录`}>
              <OrderLogsRs orderId={id} />
            </Tab.Item>
          </Tab>}
        {orderType === 5 &&
          <Tab>
            <Tab.Item key="1" title={t`任务信息`}>
              <ScTask orderId={id} modal={['view']} onCancel={() => handleClose()} />
            </Tab.Item>
            <Tab.Item key="2" title={t`订单历史变更记录`}>
              <ScTaskLogs orderId={id} />
            </Tab.Item>
          </Tab>}
      </Drawer>

    </div>
  );
}
